<MudPopoverProvider />

<MudTable ServerData="ServerReload" SortLabel="Sort by">
    <HeaderContent>
        <MudTh><MudTableSortLabel SortLabel="a" T="TestModel">a</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortLabel="b" T="TestModel">b</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="a">@context.A</MudTd>
        <MudTd DataLabel="b">@context.B</MudTd>
    </RowTemplate>
    <PagerContent>
        <MudTablePager />
    </PagerContent>
</MudTable>

@code {
    public static string __description__ = "The server-side loaded table should reload data on mobile sort.";

    private int _totalItems;

    /// <summary>
    /// Here we simulate getting the paged, filtered and ordered data from the server
    /// </summary>
    private Task<TableData<TestModel>> ServerReload(TableState state, CancellationToken token)
    {
        // This creates an in-memory IQueryable variation of our IEnumerable test
        var data = new List<TestModel>
        {
            new() { A = 1, B = 3 },
            new() { A = 2, B = 2 },
            new() { A = 3, B = 1 }
        }.AsQueryable();

        _totalItems = 3;
        data = state.SortLabel switch
        {
            "a" => data.OrderByDirection(state.SortDirection, x => x.A),
            "b" => data.OrderByDirection(state.SortDirection, x => x.B),
            _ => data
        };

        return Task.FromResult(new TableData<TestModel> { TotalItems = _totalItems, Items = data });
    }

    public class TestModel
    {
        public int A { get; set; }

        public int B { get; set; }
    }
}
